<template>
  <div id="app">
    <div :class="animation + ' h-100'">
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      animation: ""
    };
  },
  created() {},
  mounted() {},
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.animation = "h-100 animated slideInRight";
      }
      if (to.meta.index < from.meta.index) {
        this.animation = "h-100 animated slideInLeft";
      }

      document.title = to.meta.title;
      this.$store.commit("setTitleName", to.meta.title);

      if (!this.$store.state.user.token) {
        this.$router.push("/login");
      }
    }
  },
  methods: {}
};
</script>
<style lang="less">
#app{width: 100%;height: 100%;}
.el-menu{border-right: 0!important;}
</style>
